<template>
  <view class="news-container">
    <!-- 所有原有结构完全保留 -->
    <view class="header">
      <view class="nav-bar">
        <text class="nav-item active">要闻</text>
        <text class="nav-item">推荐</text>
        <text class="nav-item">关注流</text>
        <text class="nav-item">24小时</text>
        <text class="nav-item">娱乐</text>
        <text class="nav-item">福建</text>
        <text class="nav-item">财经</text>
      </view>

      <view class="weather-search">
        <view class="weather-info" v-if="weatherData.length >= 1">
          <text>明天：{{ formatDate(weatherData[0].date) }} {{ weatherData[0].week }} {{ weatherData[0].high }} {{ weatherData[0].low }} 福建 PM2.5 9</text>
        </view>
        <text class="weather-info" v-else>加载中...</text>
        <input class="search-box" placeholder="搜索关键词" />
      </view>

      <!-- 刷新提示文本（绑定动态变量） -->
      <view class="update-tip" id="refreshTip">{{ refreshText }}</view>
    </view>

    <view class="news-list">
      <cardViewText 
        v-for="(news, index) in newsList" 
        :key="index"
        :title="news.title"
        :isTop="news.isTop"
        :source="news.source"
        :commentCount="news.commentCount"
        :date="news.date"
        :image="news.image"
      />

      <view class="ad-card">
        <text class="ad-title">加微信交友群，喜欢就聊，找喜欢的人</text>
        <view class="ad-images">
          <image v-for="(img, idx) in adImages" :key="idx" :src="img" class="ad-image" mode="aspectFill"></image>
        </view>
        <view class="ad-meta">
          <text class="ad-tag">广告</text>
          <text class="ad-source">我主良缘文化</text>
        </view>
      </view>

      <cardViewText 
        :title="afterAdNews.title"
        :isTop="afterAdNews.isTop"
        :source="afterAdNews.source"
        :commentCount="afterAdNews.commentCount"
        :date="afterAdNews.date"
        :image="afterAdNews.image"
      />
    </view>
  </view>
</template>

<script>
import cardViewText from "@/components/cardViewText.vue";
import newsData from '../../data/news.json';

export default {
  components: {
    cardViewText
  },
  data() {
    return {
      newsList: [],
      adImages: ["/static/003.png", "/static/004.png", "/static/005.png"],
      afterAdNews: {},
      weatherData: [],
      
      isRefreshing: false // 刷新状态标记
    };
  },
  onLoad() {
    this.fetchData();
  },
  // 下拉刷新核心方法（强制触发状态更新）
  onPullDownRefresh() {
    if (this.isRefreshing) return; // 防止重复触发
    this.isRefreshing = true;
    console.log("下拉刷新已触发");
    
    // 立即更新提示文本（强制DOM更新）
    this.refreshText = "下拉刷新中...";
    this.$forceUpdate(); // 强制组件重新渲染，确保文本立即变化

    // 模拟接口请求（1.5秒后完成）
    setTimeout(() => {
      // 重新拉取数据（保留原有逻辑）
      this.fetchData();
      
      // 恢复提示文本
      this.refreshText = "为您更新了15条内容";
      this.isRefreshing = false;
      
      // 关闭下拉刷新动画（必须调用）
      uni.stopPullDownRefresh();
      console.log("刷新完成，已恢复文本");
      
      // 可选：提示用户刷新成功
      uni.showToast({
        title: "刷新成功",
        icon: "success",
        duration: 1000
      });
    }, 1500);
  },
  methods: {
    fetchData() {
      this.fetchNews();
      this.fetchWeather();
    },
    fetchNews() {
      this.newsList = newsData.newsList;
      this.afterAdNews = newsData.afterAdNews;
    },
    fetchWeather() {
      uni.request({
        url: "http://t.weather.sojson.com/api/weather/city/101230501",
        method: "GET",
        timeout: 10000,
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            const forecast = res.data.data.forecast;
            this.weatherData = forecast.slice(1, 2);
          } else {
            uni.showToast({ title: "天气数据解析失败", icon: "none" });
          }
        },
        fail: (err) => {
          console.error("天气请求异常：", err);
          uni.showToast({ title: "网络波动，请重试", icon: "none" });
        }
      });
    },
    formatDate(dateStr) {
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const day = dateStr;
      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    }
  }
};
</script>

<!-- 所有样式完全保留，无修改 -->
<style>
.news-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.header {
  background-color: #d93f3f;
  color: #fff;
}
.nav-bar {
  display: flex;
  padding: 10rpx 0;
  overflow-x: auto;
}
.nav-item {
  font-size: 28rpx;
  padding: 0 15rpx;
  white-space: nowrap;
}
.nav-item.active {
  font-weight: bold;
  border-bottom: 2rpx solid #fff;
}
.weather-search {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15rpx 20rpx;
}
.weather-info {
  display: flex;
  flex-direction: column;
  font-size: 26rpx;
  line-height: 1.5;
}
.search-box {
  width: 300rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 0 20rpx;
  font-size: 24rpx;
}
.update-tip {
  background-color: #ff9933;
  text-align: center;
  padding: 10rpx 0;
  font-size: 24rpx;
}
.news-list {
  padding-top: 10rpx;
}
.ad-card {
  margin: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.ad-title {
  font-size: 30rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.ad-images {
  display: flex;
  gap: 10rpx;
  margin-bottom: 10rpx;
}
.ad-image {
  flex: 1;
  height: 120rpx;
  border-radius: 8rpx;
}
.ad-meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  gap: 10rpx;
}
.ad-tag {
  color: #999;
  padding: 2rpx 10rpx;
  border: 1rpx solid #999;
  border-radius: 4rpx;
  font-size: 22rpx;
}
.ad-source {
  color: #666;
}
</style>